import React  from 'react';
import Search from './search'
import { Icon } from 'antd';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import  { actionTypes  as loginActionTypes} from '../login/store/index';
import  style from '../index.less';

const Header = (props) =>{
  let { loginStatus,logout } = props
    return (
        <div className={style.HeaderWrapper}> 
          <div className ={style.outer}>
            <a href='/' className ={style.logo}><img src='../assets/logo.png' style={{width:'100px'}} /></a>
            <div className={style.center}>
              <span className={`${style.navitem} ${style.active} ${style.left}`}>首页</span>
              <span className={`${style.navitem} ${style.left}`}>下载APP</span>
              <span className={`${style.navitem} ${style.searchArea}`}><Search/></span>
            </div>
            <div className={style.additon}>
              <div className={ style.rightBtn }>
                <button className={style.writting}>
                  <Icon className={style.writePencil} type="edit"/>写文章</button>
                  {
                    loginStatus? null:<Link to={'/register'} className={style.reg}>注册</Link>
                  }
              </div>
              <div className={style.leftBtn}>
                <span className={style.dayNine}>Aa</span>
                {
                  loginStatus ?  <Link to ={'/'} onClick={logout} className={style.login}>退出</Link>: <Link to='/login' className={style.login}>登录</Link> 
                }
                
              </div>
            </div>
          </div>
        </div>
    )
  }; 

const mapStateToProps =(state) =>{
  return {
    loginStatus:state.login.loginStatus,
  
  }
};
const mapDispatchToTypes = (dispatch) => {
  return{
    logout(){
      console.log('2w11111111111111')
      dispatch(loginActionTypes.logout())
    },
  }
}    

export default connect(mapStateToProps,mapDispatchToTypes)(Header);